<div class="cad-level-content">
  <apes-input-group [apesSuffix]="suffixIconSearch" class="cad-menu-search">
    <input type="search" apes-input placeholder="子组名称搜索" (keyup)="searchName($event)" [(ngModel)]="listName"/>
  </apes-input-group>
  <ng-template #suffixIconSearch>
    <i apes-icon apesType="close-circle" class="cad-tree-menu-clear" apesTheme="fill" *ngIf="listName"
       (click)="clearSearchName()"
    ></i>
    <img *ngIf="listName == null" [src]="'./assets/tmp/img/fn/search.png'"/>
  </ng-template>
  <ul class="cad-level-list" *ngIf="data && data.length > 0">
    <li *ngFor="let item of data; index as i;" [ngClass]="{active: currentActive === i}">
      <!--[apesTitle]="tooltipContent" apes-tooltip apesPlacement="bottom"-->
      <div class="subgroup-images"
           (click)="handleClick(item,i)">
        <img *ngIf="checkImg(item); else elseBlock" [src]="item.imageUrls[0]">
        <ng-template #elseBlock>
          <div style="
            font-size: 16px;
            color: red;
            text-align: center;
            position: absolute;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
          "><i style="width: 100%">{{item.name}}</i>
          </div>
        </ng-template>
        <span *ngIf="item.imageSN">{{item.imageSN}}</span>
      </div>

      <p>{{filterName(item.name)}}</p>

      <!--<ng-template #tooltipContent>-->
      <!--<ul style="background-color: skyblue; list-style: none; padding: 0; margin: 0">-->
      <!--<li>名称：<span>{{item.name}}</span></li>-->
      <!--<li>备注1：<span [innerHTML]="item.remake1"></span></li>-->
      <!--<li>备注2：<span [innerHTML]="item.remake2"></span></li>-->
      <!--</ul>-->
      <!--</ng-template>-->
    </li>
    <li class="hide"></li>
    <li class="hide"></li>
    <li class="hide"></li>
    <li class="hide"></li>
    <li class="hide"></li>
  </ul>
  <!--<div *ngIf="!data || data.length === 0">暂无信息</div>-->
  <apes-empty *ngIf="!data || data.length === 0 && isQuery" class="cad-level-empty"></apes-empty>

  <apes-empty class="cad-level-empty"
              *ngIf="!isQuery"
              [apesNotFoundImage]="imageTpl"
              [apesNotFoundContent]="contentTpl">
    <ng-template #imageTpl>
      <img src="./assets/tmp/img/cad/assemblyDrawing-empty.png" style="width: 40vw;height: 100%;border-radius: 10px;">
    </ng-template>
    <ng-template #contentTpl>
      <span style="font-size: 20px;font-weight: bold;color: rgba(0, 0, 0, 0.4);"> 当前车型暂无装配图，请直接输入配件名称/商品名称/商品编码进行搜索 </span>
    </ng-template>
  </apes-empty>
</div>
